<template>
  <view class="card-apply-page">
    <!-- 顶部导航栏 -->
    <up-navbar :title="useT(pageTitle)" :safe-area-inset-top="true" :placeholder="true" :border="false" bg-color="#fff" title-color="#333" left-icon="arrow-left" @leftClick="goBack" />
    <!-- 页面内容 -->
    <view class="content">
      <!-- 加载状态 -->
      <view v-if="loading" class="loading-container">
        <up-loading-icon mode="circle" color="#12C284"></up-loading-icon>
        <view class="loading-text">{{ useT('加载中.') }}</view>
      </view>

      <!-- 卡片详情内容 -->
      <view v-else-if="cardDetail">
        <!-- 卡片图片 -->
        <view class="card-image-container" v-if="cardDetail.image">
          <image :src="cardDetail.image" mode="widthFix" class="card-image"></image>
        </view>

        <!-- 卡片优势 -->
        <view class="card-advantages">
          <view class="advantages-header">
            <view class="title-wrapper">
              <text class="advantages-title">{{ useT(cardDetail.title) }}</text>
              <text class="advantages-subtitle" v-if="cardDetail.maxtitle">({{ useT(cardDetail.maxtitle) }})</text>
            </view>
            <text class="applicants-count">{{ cardDetail.virtual_num || 0 }} {{ useT('人已申请') }}</text>
          </view>
        </view>

        <!-- 卡片详情 -->
        <view class="card-details">
          <view class="detail-item" v-if="cardDetail.price">
            <text class="detail-label">{{ useT('卡片费用') }}</text>
            <text class="detail-value">{{ cardDetail.price }} {{ useT('USDT') }}</text>
          </view>
          <view class="detail-item" v-if="cardDetail.redio">
            <text class="detail-label">{{ useT('充值费率') }}</text>
            <text class="detail-value">{{ cardDetail.redio }}</text>
          </view>
          <view class="detail-item" v-if="cardDetail.xiane">
            <text class="detail-label">{{ useT('消费限额') }}</text>
            <text class="detail-value">{{ cardDetail.xiane }} {{ useT('USD') }}</text>
          </view>
        </view>

        <!-- 产品特色 -->
        <view class="product-features" v-if="cardDetail.content">
          <text class="features-title">{{ useT('产品特色') }}</text>
          <view class="features-content">
            <view class="features-line" v-for="(line, index) in contentList" :key="index">{{ useT(line) }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 申请按钮 -->
    <view class="apply-button-container">
      <view class="apply-button" @click="applyCard">{{ useT('去申请') }}</view>
    </view>

    <!-- 密码输入弹窗 -->
    <up-popup v-model:show="showPasswordPopup" mode="center" :round="20" :closeable="true" :closeOnClickOverlay="true" @close="closePasswordPopup">
      <view class="password-popup">
        <view class="popup-title">{{ useT('请输入登录密码') }}</view>
        <view class="popup-content">
          <view class="password-input-wrapper">
            <input class="password-input" type="password" :placeholder="useT('请输入登录密码')" v-model="password" @confirm="confirmApply" :focus="showPasswordPopup" />
          </view>
        </view>
        <view class="popup-buttons">
          <up-button type="default" :text="useT('取消')" :custom-style="{ width: '200rpx', height: '80rpx', marginRight: '20rpx' }" @click="closePasswordPopup" />
          <up-button type="primary" :text="useT('确认')" :custom-style="{ width: '200rpx', height: '80rpx' }" @click="confirmApply" />
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { applyUcard, getUcardDetail } from '@/api/project.js';
import { useT } from '@/utils/i18n';
import { onLoad } from '@dcloudio/uni-app';
import { computed, ref } from 'vue';

// 响应式数据
const pageTitle = ref(useT('卡片申请'));
const cardDetail = ref(null);
const loading = ref(false);
const cardId = ref('');
const showPasswordPopup = ref(false);
const password = ref('');
const applying = ref(false);

// 将内容按换行符分割
const contentList = computed(() => {
  if (!cardDetail.value?.content) return [];
  return cardDetail.value.content.split('\n').filter((line) => line.trim());
});

// 获取卡片详情
const loadCardDetail = async () => {
  if (!cardId.value) {
    uni.showToast({
      title: useT('卡片ID不能为空'),
      icon: 'none'
    });
    return;
  }

  try {
    loading.value = true;
    const response = await getUcardDetail({ id: cardId.value });

    if (response && response.data) {
      cardDetail.value = response.data;
      // 设置页面标题
      if (response.data.title) {
        pageTitle.value = response.data.title;
      }
    } else {
      throw new Error(response?.msg || useT('获取卡片详情失败'));
    }
  } catch (error) {
    console.error('获取卡片详情失败:', error);
    uni.showToast({
      title: error?.msg || error?.message || useT('获取卡片详情失败'),
      icon: 'none'
    });
  } finally {
    loading.value = false;
  }
};

// 页面加载
onLoad((options) => {
  // 获取传递的收款人信息
  cardId.value = options.id;
  loadCardDetail();
});

// 方法定义
// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 申请卡片
const applyCard = () => {
  if (!cardId.value) {
    uni.showToast({
      title: useT('卡片ID不能为空'),
      icon: 'none'
    });
    return;
  }
  showPasswordPopup.value = true;
  password.value = '';
};

// 关闭密码弹窗
const closePasswordPopup = () => {
  showPasswordPopup.value = false;
  password.value = '';
};

// 确认申请
const confirmApply = async () => {
  if (!password.value || !password.value.trim()) {
    uni.showToast({
      title: useT('请输入登录密码'),
      icon: 'none'
    });
    return;
  }

  if (applying.value) {
    return;
  }

  try {
    applying.value = true;
    uni.showLoading({
      title: useT('申请中')
    });

    const response = await applyUcard({
      id: cardId.value,
      pwd: password.value.trim()
    });

    uni.hideLoading();

    if (response && response.status === 200) {
      uni.showToast({
        title: response.msg || useT('申请成功'),
        icon: 'success'
      });
      closePasswordPopup();
      // 刷新卡片详情
      setTimeout(() => {
        uni.switchTab({
          url: '/pages/tabBar/wallet'
        });
      }, 1500);
    } else {
      throw new Error(response?.msg || useT('申请失败'));
    }
  } catch (error) {
    console.error('申请卡片失败:', error);
    uni.hideLoading();
    uni.showToast({
      title: error || useT('申请失败，请重试'),
      icon: 'none'
    });
  } finally {
    applying.value = false;
  }
};
</script>

<style lang="scss" scoped>
.card-apply-page {
  min-height: 100vh;
  background-color: #f8f9fa;
}

.content {
  padding: 20rpx;
}

// 卡片图片
.card-image-container {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: center;
  align-items: center;

  .card-image {
    width: 100%;
    height: auto;
    border-radius: 10rpx;
  }
}

// 加载状态
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;

  .loading-text {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #666;
  }
}

// 卡片优势
.card-advantages {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);

  .advantages-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    .title-wrapper {
      display: flex;
      flex-direction: column;
      flex: 1;
      margin-right: 20rpx;
    }

    .advantages-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }

    .advantages-subtitle {
      font-size: 24rpx;
      color: #666;
      margin-top: 8rpx;
    }

    .applicants-count {
      font-size: 24rpx;
      color: #12c284;
      font-weight: 500;
      white-space: nowrap;
    }
  }
}

// 卡片详情
.card-details {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);

  .detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .detail-label {
      font-size: 28rpx;
      color: #666;
    }

    .detail-value {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }
  }
}

// 产品特色
.product-features {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 120rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);

  .features-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 20rpx;
    display: block;
  }

  .features-content {
    font-size: 26rpx;
    color: #666;
    line-height: 1.6;

    .features-line {
      margin-bottom: 12rpx;
      word-break: break-word;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

// 申请按钮
.apply-button-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  padding: 20rpx 30rpx;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.08);

  .apply-button {
    width: 100%;
    height: 88rpx;
    background-color: #12c284;
    border-radius: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 32rpx;
    font-weight: 600;
    box-shadow: 0 4rpx 15rpx rgba(18, 194, 132, 0.3);
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.98);
      box-shadow: 0 2rpx 8rpx rgba(18, 194, 132, 0.3);
    }
  }
}

// 密码输入弹窗
.password-popup {
  width: 600rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 40rpx 30rpx 30rpx;
  box-sizing: border-box;

  .popup-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 30rpx;
  }

  .popup-content {
    margin-bottom: 30rpx;

    .password-input-wrapper {
      width: 100%;

      .password-input {
        width: 100%;
        height: 88rpx;
        padding: 0 20rpx;
        background-color: #f5f5f5;
        border-radius: 12rpx;
        font-size: 28rpx;
        color: #333;
        box-sizing: border-box;
      }
    }
  }

  .popup-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
